<html>

<head>
	<title></title>
</head>
<style type="text/css">
	html,
	body {
		padding: 0;
		margin: 0;
	}
	#huaban {
		border: 1px solid #000;
	}
</style>

<body>
	<canvas id="huaban"></canvas>
	<!-- <script src="./socket.io.js"></script> -->
	<script src="https://cdn.bootcdn.net/ajax/libs/socket.io/2.3.0/socket.io.dev.js"></script>
	<script type="text/javascript">
		var socket = io.connect('http://192.168.1.49:8000');
		
		var canvas = document.getElementById('huaban');
		canvas.width = window.innerWidth - 2;
		canvas.height = window.innerHeight - 2;
		var ctx = canvas.getContext("2d");
		ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
		ctx.lineWidth = 5;
		canvas.onmousedown = (e) => {
			console.log(111)
			socket.emit("start" , { x: e.pageX, y: e.pageY})
			canvas.onmousemove = (eve) => {
			socket.emit("end" , { x: eve.pageX, y: eve.pageY})
			}
			canvas.onmouseup = () => {
				canvas.onmousemove = null
			}

		}
		socket.on("start", (start) => {
			console.log(start);
			ctx.beginPath();
			ctx.strokeStyle = '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);
			ctx.moveTo(start.x, start.y); //起点
		})
		socket.on("end", (end) => {
			console.log(end);
				ctx.lineTo(end.x, end.y); //终点
				ctx.stroke();
		})
	</script>
</body>


</html>